<template>
    <div>
        <el-dialog v-model="props.dialogLanguage" title="添加语言" width="550" @close="handleLanguageClose">
            <el-form ref="languageProductRef" :model="languageFrom" :rules="rules" label-width="auto"
                label-position="left">
                <el-form-item label="添加语言" prop="languageId" required>
                    <el-select v-model="languageFrom.languageId" placeholder="请选择" @change="changeLanguageId">
                        <el-option v-for="dict in sys_language_type" :key="dict.id" :label="dict.description"
                            :value="dict.id" :disabled="newList.includes(dict.id)">
                            <!--  根据条件控制是否显示删除按钮 -->
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="handleLanguageClose">取消</el-button>
                <el-button type="primary" @click="handleLanguageSure">
                    确认
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, watch, reactive, onMounted } from "vue";
const emits = defineEmits(["handleLanguageClose", "handleLanguageSure"]);
const { proxy } = getCurrentInstance();
const props = defineProps({
    publicLanguageList: {
        type: Array,
        default: [],
    },

    dialogLanguage: {// 默认隐藏
        type: Boolean,
        default: false,
    },
});
const sys_language_type = ref([])//语言列表数据
const languageFrom = ref({
    languageId: null,
    languageName: ''
})
const newList = ref([])
watch(
    () => props.dialogLanguage,
    () => {
        if (!props.dialogLanguage) return;
        getProcessing()//监听处理逻辑
    })
const handleLanguageSure = () => {
    proxy.$refs["languageProductRef"].validate((valid) => {
        if (!valid) return
        emits("handleLanguageSure", languageFrom.value);
        verify()
    })
}
const handleLanguageClose = () => {
    verify()
    emits("handleLanguageClose");
}
const changeLanguageId = (e) => {
    const { description } = sys_language_type.value.find(code => code.id === e)
    languageFrom.value.languageName = description;
}
const rules = {
    languageId: [{ required: true, trigger: "blur", message: "请选择" }],
}
const getProcessing = () => {
    newList.value = []
    newList.value = props.publicLanguageList.map(e => e.languageId)
    // console.log(newList.value);
}
const verify = () => {
    languageFrom.value.languageId = null;
    languageFrom.value.languageName = '';
    proxy.resetForm("languageProductRef");
}
onMounted(() => {
    getLanguage()//获取语言
})
const getLanguage = () => {//语言列表数据
    product.language.languageList().then((res) => {
        sys_language_type.value = res.data;
    });
}
</script>